<template>
    <div class="play">
        <div class="header">
            <div class="title">
                <router-link to>
                    <van-icon @click="$router.back(-1)" name="arrow-left" size="30" color="gray"/>
                </router-link>
                <div class="music-info">
                    <p>{{getSongList[getSongCur].name}}</p>
                </div>
                <router-link to="/search">
                    <van-icon name="search" size="30" color="gray"/>
                </router-link>
            </div>
        </div>
        <div class="song-info">
            <div class="song-info-img">
                <img :src="getSongList[getSongCur].pic==null?require('@/assets/bowl.jpg'):getSongList[getSongCur].pic" alt />
            </div>
            <div class="iconbox">
                <van-icon name="like-o" size="33" color="gray"/>
                <i class="box"></i>
                <van-icon @click="$router.push({name:'comment', params:{id:getSongList[getSongCur].id}})" name="chat-o" size="33" color="gray"/>
            </div>
        </div>
        <div class="song">
            <LRC v-if="isRefresh" :id="getSongList[getSongCur].id" :currentTime="getSongCurTime"/>
        </div>


        <div class="islider">
            <van-slider active-color="#999" v-model="value" @change="changeVal"/>
        </div>

        <div class="iplay">
            <van-image width="35" height="35" :src="require('@/assets/img/swipeImage/play_icn_one.png')" />
            <van-image @click="lastSong" width="35" height="35" :src="require('@/assets/img/swipeImage/music_previous.png')" />
            <van-image @click="playPause" width="60" height="60" :src="playIcon" />
            <van-image @click="nextSong" width="35" height="35" :src="require('@/assets/img/swipeImage/music_next.png')" />
            <van-image @click="showPopup" width="35" height="35" :src="require('@/assets/img/swipeImage/playbar_btn_playlist.png')" />
        </div>

        <van-popup v-model="show" position="bottom" :style="{ height:'40%' }">

            <div class="title">
                <span>推荐歌单</span>
            </div>
            <van-divider class="margin"/>

            <div class="index" v-for="(item, index) in getSongList" :key="index">
            <!-- <van-image class="imagemargin" width="60px" :src="require('@/assets/logo.png')" /> -->
            <div class="indexname">
                <span>
                    <span v-if="getSongCur == index" style="color:red;" class="song">{{item.name.slice(0,33)}} </span>
                    <span @click="setSongCur(index)" v-if="getSongCur != index" class="song">{{item.name.slice(0,33)}} </span>
                    <!-- <span class="singer">- bb</span> -->
                </span>
                <div>
                <van-icon v-if="getSongCur == index" name="cross" size="24" color="gray"/>
                <van-icon v-if="getSongCur != index"  @click="popSongList(index)" name="cross" size="24" color="gray"/>
                <van-divider class="Mmargin"/>
                </div>
            </div>
            </div>
            
        </van-popup>

    </div>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex'
import List from '@/api/index'
import LRC from './LRC'
export default {
    data() {
        return {
            value:0,
            isRefresh:true,
            playIcon:require('@/assets/img/swipeImage/z_aa.png'),
            show: false,
        };
    },
    components: {
        LRC
    },
    computed:{
        ...mapGetters(['getSongCur','getSongList','getSongCurTime','getSongTime','getIsPlay']),
    },
    methods: {
        ...mapMutations(['setSsongCurTime','setSongCur','setIsPlay','popSongList']),
        changeVal(){
            console.log('this.value:',this.value)
            this.setSsongCurTime((this.value/100)*this.getSongTime);
        },playPause(){
            this.setIsPlay(!this.getIsPlay);
            if(this.getIsPlay){
                this.playIcon = require('@/assets/img/swipeImage/z_aa.png');
            }else{
                this.playIcon = require('@/assets/img/swipeImage/z_bb.png')
            }
        },lastSong(){
            if(this.getSongCur == 0) this.setSongCur(this.getSongList.length-1);
            else this.setSongCur(this.getSongCur-1);
            this.playIcon =require('@/assets/img/swipeImage/z_aa.png')
        },nextSong(){
            if(this.getSongCur+1 == this.getSongList.length) this.setSongCur(0);
            else this.setSongCur(this.getSongCur+1);
            this.playIcon = require('@/assets/img/swipeImage/z_aa.png')
        },showList(){
            console.log('songList:',this.getSongList)
            console.log('curSong:',this.getSongCur)
        },showPopup() {
            this.show = true;
        },
       
    },watch:{
        getSongCurTime(){
            this.value = parseInt((this.getSongCurTime/this.getSongTime)*100);
        },
        getSongCur(){
            this.isRefresh = false;
            this.$nextTick(()=>{
                this.isRefresh = true;
            })
        }
    },
    created(){
        if(this.getSongList.length == 0){
            this.$router.push('/');
        }
    }
};
</script>

<style scoped>

.play{
    background: #F1F1F1;
    height: 100%;
    width: 100%;
    position: absolute;
}

.header {
    padding: 15px;
}

.music-info {
    flex: 1;
    font-size: 20px;
    margin-top: 2%;
}

.title {
    display: flex;
    text-align: center;
}

.left {
    font-size: 30px;
}

.ca {
    color: red;
}

.right {
    font-size: 30px;
}

.song-info {
    padding: 15px;
    margin-top: 8%;
}

.song-info-img {
    text-align: center;
}

.song-info-img img {
    width: 50%;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.31);
}

.song-lrc {
    margin-top: 10px;
    min-height: 50px;
}

.iconbox {
    display: flex;
    margin-top: 30px;
}

.iconbox .box {
    flex: 1;
}

.song {
    width: 100%;
    text-align: center;
}

.song audio {
    width: 80%;
}

.active {
    color: #222;
}

.author {
    font-size: 12px;
    color: #999;
}

/*  */
.islider{
    /* border: 1px solid #000; */
    margin: 7% 12%;
    margin-top:12%;
}
.iplay{
    margin-top:7%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    /* border: 1px solid #000; */
}
.index{
  /* border: 1px solid #000; */
  display:flex;
  margin: 2% 8%;
  margin-top:5px;
  margin-bottom: 5px;
}
.indexname{
  /* border: 1px solid #000; */
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.imagemargin{
  margin-left: 5px;
  margin-right: 25px;
}
.song{
  font-size: 16px;
}
.singer{
  font-size: 12px;
  color: gray;
}
.title{ 
  height:40px; 
  line-height:75px; 
  display:flex;
  justify-content:space-between
}
.title span{
  margin-left: 25px;
  font-size: 18px;
}
.Mmargin{
  margin: 12% 0%;
}
</style>